import { useState, useEffect, useCallback, useRef } from 'react';

// 懒加载 Hook：当元素接近视口顶部 100px 时加载
export const useLazyLoad = (threshold = 100) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const ref = useRef<HTMLImageElement | null>(null);

  useEffect(() => {
    if (!ref.current) {
      return;
    }

    const observer = new IntersectionObserver(
      // 这里返回了所有的监听元素，由于我们是分开注册的所以这里取第一项
      entries => {
        const entry = entries[0];
        console.log(entries);

        if (
          entry.isIntersecting
          // || entry.boundingClientRect.top <= threshold
        ) {
          const img = entry.target as HTMLImageElement;
          img.src = img.dataset.src!;
          setIsLoaded(true);
          // observer.unobserve(img); // 如果是多元素同时观察，这里可以只停止其中一个
          observer.disconnect(); // 加载后停止观察
        }
      },
      {
        root: null, // 你要观察的元素与谁进行交叉（默认不填为null，与视口进行交叉）
        rootMargin: `0px 0px -${threshold}px 0px`, // 当元素顶部距离视口底部 threshold 时触发
        threshold: 0, // 0表示碰到边了就行执行，1表示完全进入视口才执行，取值范围0~1
      }
    );

    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [threshold]);

  return { imgRef: ref, isLoaded };
};
